<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-back-view">
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_mobile.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="手机号" v-model="inputData.mobile" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_code.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="验证码" v-model="inputData.code" /></view>
					</view>
					<view class="uni-item-view-right" @click="sendClick">
						<!-- <view class="code-text"><text>获取验证码 {{time}}</text></view> -->

						<view v-if="showText == true" class="code-text">发送验证码</view>
						<view v-else class="code-text">{{ second }}s重新发送</view>
					</view>
				</view>
				<view class="uni-item-view1">
					<view class="uni-item-view-btn">
						<view class="btn" @click="submitClick"><text>提交</text></view>
					</view>
				</view>

				<view class="uni-item-view1">
					<view class="uni-item-view-title">
						<view><text class="text1">手机收不到短信验证码？</text></view>
						<view><text class="text2">1、检查短信是否拦截，将发件人加入白名单。</text></view>
						<view><text class="text2">2、每个账号每天发送验证码次数有限。</text></view>
						<view><text class="text2">3、可能由于网路异常导致，请重新获取或者稍后再试</text></view>
					</view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
// import timeHMS from "../../../common/timeHMS.js"
export default {
	data() {
		return {
			inputData: {
				mobile: '',
				code: ''
			},
			// time: '00.00.00',
			// timeHMS,
			// timer: null, //定义计时器，以便全局访问
			second: 60,
			showText: true
		};
	},
	onLoad() {
		// this.timer = setInterval(() => {
		// 	//调用定义的事件，进行倒计时操作，传入需要结束的时间戳
		// 	this.countDown(1719317020);
		// }, 1000);
	},

	methods: {
		getCode() {
			//倒计时
			this.showText = false;
			var interval = setInterval(() => {
				let times = --this.second;
				this.second = times < 10 ? '0' + times : times; //小于10秒补 0
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				this.second = 60;
				this.showText = true;
			}, 60000);
		},

		// 定义倒计时
		// countDown(endtime) {
		// 	//判断倒计时是否为0，如果为零即可清楚计时器
		// 	if (this.timeHMS(endtime) == '00.00.00') {
		// 		clearInterval(this.timer);
		// 	}
		// 	this.time = this.timeHMS(endtime);
		// },

		sendClick() {
			if(!this.showText){
				return
			}
			if (this.check.isNull(this.inputData.mobile)) {
				uni.showToast({
					title: '请填写手机号'
				});
				return;
			}
			this.sendMessageData();
		},
		submitClick() {
			if (this.check.isNull(this.inputData.mobile)) {
				uni.showToast({
					title: '请填写手机号'
				});
				return;
			}
			if (this.check.isNull(this.inputData.code)) {
				uni.showToast({
					title: '请填写验证码'
				});
				return;
			}
			this.changeMobileData();
		},
		sendMessageData() {
			var data = {
				mobile: this.inputData.mobile
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.captchaSmsApi,
				data: data,
				success: res => {
					console.log(res);
					if (res.success == 'true' && res.data) {
						this.getCode();
					}
					uni.showToast({
						title: res.message
					});
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		changeMobileData() {
			var data = {
				captcha: this.inputData.code,
				mobile: this.inputData.mobile
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.sChangeMobileApi,
				data: data,
				success: res => {
					console.log(res);
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					uni.showToast({
						title: res.message
					});
					if (res.success == 'true' && res.data) {
						that.$util.redirectToHome(true);
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-back-view {
	margin-top: 32rpx;
	margin-bottom: 32rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;

	padding-top: 32rpx;
	padding-bottom: 32rpx;
	background-color: #fff;
	border-radius: 10rpx;
}
.uni-item-view1 {
	// width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;
	.uni-item-view-title {
		display: flex;
		flex-direction: column;
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 100%;
		margin-top: 64rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		.text1 {
			font-size: 28rpx;
			color: $uni-text-color-primary;
		}
		.text2 {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.uni-item-view-btn {
		width: 100%;
		margin-left: 16rpx;
		margin-right: 16rpx;
		margin-top: 32rpx;
		.btn {
			height: 80rpx;
			// width: 100%;
			background-color: $uni-btn-color-primary;
			color: #fff;
			margin-left: 32rpx;
			margin-right: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.uni-item-view {
	// width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;

	.uni-item-view-left {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		.uni-item-view-left-image {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.uni-item-view-left-input {
			width: 100%;
			.input {
				padding-left: 0rpx;
			}
		}
	}

	.uni-item-view-right {
		width: 240rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.code-text {
			color: $uni-text-color-primary;
			font-size: 26rpx;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
	}
}
</style>
